<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui"/>
  <title>Mojito</title>
  <script src="../js/base.js"></script>
  <link rel="stylesheet" href="../plugins/vant/vant.min.css">
  <link rel="stylesheet" href="../styles/common.css"/>
  <link rel="stylesheet" href="../styles/user.css"/>
</head>
<body>
  <div id="user" class="app">
    <div class="divHead">
      <div class="divTitle">
        <i @click="goBack"><van-icon name="arrow-left" /></i>个人中心
      </div>
      <div class="divUser">
        <div class="divAvatar" @click="toUserEditPage">
          <van-image round :src="getAvatar(userInfo.avatar)">
            <template v-slot:error></template>
          </van-image>
        </div>
        <div class="desc">
          <div class="divName">{{userInfo.name}}</div>
          <div class="divEmail">{{userInfo.email}}</div>
        </div>
      </div>
    </div>
    <div class="divContent">
      <div class="divLinks">
        <div class="item" @click="toAddressPage">
          <img src="../images/locations.png"/>
          <span>地址管理</span>
          <i><van-icon name="arrow" /></i>
        </div>
        <div class="divSplit"></div>
        <div class="item" @click="toOrderPage">
          <img src="../images/orders.png"/>
          <span>我的订单</span>
          <i><van-icon name="arrow" /></i>
        </div>
      </div>
      <div class="divOrder" v-if="order">
        <div class="title">最新订单</div>
        <div class="content" @click="toOrderDetailPage">
          <div class="head">
            <span class="time">{{order.orderTime}}</span>
            <span class="status">{{getStatus(order.status)}}</span>
          </div>
          <div class="goods">
            <div v-for="(item,index) in order.details" :key="index" class="item">
              <van-image :src="getImage(item.image)">
                <template v-slot:error></template>
              </van-image>
              <div class="name">{{item.name}}</div>
            </div>
          </div>
          <div class="result">
            <span class="goodsNum">共{{order.goodsNum}}件商品，实付</span>
            <span class="amount">￥{{order.amount}}</span>
          </div>
        </div>
      </div>
      <div class="logout" @click="logout">退出登录</div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../plugins/vant/vant.min.js"></script>
  <!-- 引入axios -->
  <script src="../plugins/axios/axios.min.js"></script>
  <script src="../js/request.js"></script>
  <script src="../js/common.js"></script>
  <script src="../api/order.js"></script>
  <script src="../api/user.js"></script>
  <script>
    new Vue({
      el: "#user",
      data() {
        return {
          userInfo: {},
          order: null
        }
      },
      created() {
        this.init()
      },
      methods: {
        init() {
          getUserApi().then(res => {
            this.userInfo = res.data
            this.getLatestOrder()
          }).catch(error => {
            this.$notify({type: 'danger', message: error.message})
          })
        },

        // 获取最新订单
        getLatestOrder() {
          const params = {page: 1, pageSize: 1}
          getOrderPageApi(params).then(res => {
            const order = res.data.records[0]
            if (order) {
              // 统计订单商品数量
              let goodsNum = 0
              order.details.forEach(detail => goodsNum += detail.number)
              order.goodsNum = goodsNum
              // 根据商品Id去重
              const set = new Set()
              order.details = order.details.filter(detail => !set.has(detail.goodsId) && set.add(detail.goodsId))
              this.order = order
            }
          }).catch(error => {
            this.$notify({type: 'danger', message: error.message})
          })
        },
        // 获取订单状态
        getStatus(status) {
          let str
          switch (status) {
            case 1:
              str = '待付款'
              break
            case 2:
              str = '已支付'
              break
            case 3:
              str = '已接单'
              break
            case 4:
              str = '派送中'
              break
            case 5:
              str = '已完成'
              break
            case 6:
              str = '已取消'
              break
          }
          return str
        },

        // 退出登录
        logout() {
          logoutApi().then((res) => {
            sessionStorage.clear()
            window.requestAnimationFrame(() => {
              window.location.replace('/front/page/login.html')
            })
          }).catch(error => {
            this.$toast(error.message)
          })
        },

        // 获取商品图片文件的URL
        getImage(image) {
          return getFileUrl(image, null, '')
        },

        // 获取头像图片文件的URL
        getAvatar(avatar) {
          return getFileUrl(avatar, 'avatar', '../images/avatar.png')
        },

        toUserEditPage() {
          window.requestAnimationFrame(() => {
            window.location.href = '/front/page/user-edit.html'
          })
        },
        toAddressPage() {
          window.requestAnimationFrame(() => {
            window.location.href = '/front/page/address.html'
          })
        },
        toOrderPage() {
          window.requestAnimationFrame(() => {
            window.location.href = '/front/page/order.html'
          })
        },
        toOrderDetailPage() {
          window.requestAnimationFrame(() => {
            window.location.href = `/front/page/order-detail.html?id=${this.order.id}`
          })
        },
        goBack() {
          window.requestAnimationFrame(() => {
            history.back()
          })
        }
      }
    })
  </script>
</body>
</html>